<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <!-- <form action="" method="post" enctype="application/x-www-form-urlencoded">
			
			<input type="submit" value=""/>
		</form> -->
    <button class="btn1">发送get的ajax</button>
    <button class="btn2">发送post的ajax</button>
    <button class="btn3">发送post的传文件的ajax</button>
    <script type="text/javascript">
      // ajax 封装 ；
      // get请求
      document.querySelector(".btn1").onclick = function () {
        ajax({
          url: "get.php",
          method: "get",
          async: true,
          dataType: "json",
          data: {
            name: "张三",
            age: 20,
          },
          success: function (res) {
            // 用来接收ajax返还的结果
            console.log("get成功了", res);
          },
        });
      };

      // post请求

      document.querySelector(".btn2").onclick = function () {
        ajax({
          url: "post.php",
          method: "POST",
          async: true,
          dataType: "json",
          data: {
            name: "李四",
            age: 21,
          },
          success: function (data) {
            console.log("post成功了", data);
          },
        });
      };

      function ajax(options) {
        // 1.创建ajax对象
        let xhr;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        } else {
          xhr = new ActiveXObject();
        }

        // 给默认参数；
        let {
          url = "",
          method = "get",
          async = true,
          data = {},
          success = function () {},
          dataType = "text",
        } = options;

        // 如果是get参数 那么 需要获取data里的数据 拼接在url上
        // console.log(data);
        if (method.toLowerCase() == "get") {
          url = url + "?" + o2s(data);
        }

        // 第二步；
        xhr.open(method, url, async);
        //post请求 设置头部
        if (method.toLowerCase() == "post") {
          xhr.setRequestHeader(
            "content-type",
            "application/x-www-form-urlencoded"
          );
        }
        xhr.onload = function () {
          // console.log(xhr.responseText);
          if (dataType == "text") {
            success(xhr.responseText);
          } else {
            success(JSON.parse(xhr.responseText));
          }
        };
        if (method.toLowerCase() == "post") {
          let sendData = o2s(data);
          xhr.send(sendData);
        } else {
          xhr.send();
        }
      }

      // obj = {name:"张三",age:20} ----->name=张三&age=20;
      var obj = { name: "张三", age: 20, height: "178cm" };

      // let o2s = function(obj){
      // 	let keys = Object.keys(obj);
      // 	// name = 张三;
      // 	var arr = keys.map(key=>key+"="+obj[key]);

      // 	// console.log(arr);  // [name=张三,age=20];
      // 	var str = arr.join("&");
      // 	// console.log(str);
      // 	return str;
      // }

      let o2s = (obj) =>
        Object.keys(obj)
          .map((key) => key + "=" + obj[key])
          .join("&");

      // console.log(o2s(obj))
    </script>
  </body>
</html>
